<template>
    <div id="indexPage">
        <mt-header title="天杭实验小学" id="nva">
            <router-link to="/" slot="left">
            <mt-button icon="back">返回</mt-button>
            </router-link>
            <!-- <mt-button icon="more" slot="right" ></mt-button> -->
        </mt-header>
        <!-- 主页头部学校信息 -->
         <img class="logout" src="../assets/img/logout.png" alt="" @click='logout'>
        <div class="indexTop">
             <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540285856482&di=b13e469cad61153f19a88bac3a6f39e1&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb03533fa828ba61e24a6e7124a34970a304e5946.jpg " alt=""> 
            <!-- 上传功能<el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload> -->
            <div class="content" @click='jumpTo'>
                <!-- <p class="schoolName">{{this.$store.state.loginName}}</p>  -->
                <p class="schoolName">{{lname}}</p> 
                <p>杭州市天杭实验学校</p>
            </div>
             <!-- <router-link to="./index/amentp"> -->
            <p class="arrow" @click='jumpTo'>></p>
           
        </div>
        <!-- 文章审核部分 -->
        <div class="information">
            <router-link to="/index/articlelist"><span class="title">全部文章({{ this.$store.state.allArticleCount}})</span></router-link><span>|</span>
            <router-link to="/index/notaudit"><span class="audit">未审核({{this.$store.state.noArticleCount}})</span></router-link>
        </div>
        <!-- 功能模块 -->
        <div class="contain">
            <table></table>
            <!-- 发布新文章 -->
            <div class="postNew">
            <router-link to="/publish"> <img src="../assets/img/release.png" alt=""></router-link>
            <p>发布新文章</p>
            </div>
            <!-- 班级信息 -->
            <div class="classMsg">
                <ul>
                    <li v-for="(item,i) in informationList" @click="pushTo(i)" :style="{background:item.backgroundList}">
                        <img :src='item.imgSrc' alt="">                     
                        <p>{{item.title}}</p>
                    </li>
                </ul>
            </div>
        </div>        
    </div>
</template>

<script>
    export default{
        // inject:['reload'],
        data(){
            return {
                 lname:'',
                informationList:[
                    {title:'修改学生信息',imgSrc:require('../assets/img/student.png'), backgroundList:'#2EE277'},   
                    {title:'修改老师信息', imgSrc:require('../assets/img/teacher.png'), backgroundList:'#00BFFE'},
                    {title:'班级相册', imgSrc:require('../assets/img/photo.png'),backgroundList:'#FD73FC'},
                    {title:'发布班级通知信息', imgSrc:require('../assets/img/msg.png'),backgroundList:'#6B57EE'},
                    ],
                     imageUrl: '',
                    //  通过sessionStorage保存的用户名
                    
                }
            },
            methods:{
                pushTo(index){
                    this.$router.push({path:'index/reset',query:{
                         title:this.informationList[index].title,
                        }
                    })
                },
                handleAvatarSuccess(res, file) {
                        this.imageUrl = URL.createObjectURL(file.raw);
                    },
                beforeAvatarUpload(file) {
                        const isJPG = file.type === 'image/jpeg';
                        const isLt2M = file.size / 1024 / 1024 < 2;

                        if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                        }
                        if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                        }
                        return isJPG && isLt2M;
                    },
                jumpTo(){
                        this.$router.push({path:"./index/amentp"})
                    },
                    //退出登录
                    logout(){
                        let _this=this;
                        this.$confirm('确认退出登录吗？','提示',{}).then(
                            ()=>{
                                var url="http://125.210.160.93:8080/SmEdu/port/admi/logout";
                                this.$http.post(url).then((res)=>{               
                                setTimeout(()=>{this.$router.push({path:'/login'})},1000);
                                console.log(res);
                                console.log(res.status);
                                console.log(res.data.head.code);
                                }).catch((err)=>{
                                    console.log(err);
                                })
                                // sessionStorage.removeItem('');
                                // sessionStorage.removeItem('');
                                // if(this.notify)this.notify.close();
                                // logout();
                                // _this.$router.push('/login');
                                // console.log(1111);                                             
                            })
                    },
                    //显示历史发布文章数量
                    allArticleCount(){
                        var url="http://125.210.160.93:8080/SmEdu/pass/news/OK";
                        this.$http.post(url,{schoId:19,pageNum:1,pageSize:100}).then((res)=>{
                        this.$store.state.allArticleCount=res.data.tail.itemAmount;
                        // console.log(res.data);
                        // console.log(res.data.body.length);
                    }).catch((err)=>{
                        console.log(err);
                    })
                   },
                   //显示未审核文章数量
                   noArticleCount(){
                     var url="http://125.210.160.93:8080/SmEdu/pass/news/NOT";
                        this.$http.post(url,{schoId:19,pageNum:1,pageSize:100}).then((res)=>{
                         this.$store.state.noArticleCount=res.data.tail.itemAmount;
                        
                     }).catch((err)=>{
                            console.log(err);
                     })
                   }
            },
            mounted(){
                this.$store.commit('numCount');
                console.log('&&&&&&&&&&&&');
                this.allArticleCount();
                this.noArticleCount();
                console.log('%%%%%%%%%%%%%%%%%%%%5');
                // this.reload();
                // 仓库保存用户名
                //console.log(this.$store.state.loginName);
                // sessionStorage保存用户名 不能直接this.lname=name=sessionStorage.getItem('lName')
                var name=sessionStorage.getItem('lName');
                this.lname=name;
            },
          
        }
    
</script>

<style>
    #nav{
        height:1.3333rem;
    }
    #indexPage .indexTop{
        height:3.2rem;
        display:flex;
        justify-content: space-around;
        align-items:center;
    }
     #indexPage .indexTop img{
         width:1.3333rem;
         height:1.3333rem;
         border-radius: 50% 50%;
         border:1px solid black;
     }
     #indexPage img.logout{
         width:1.0667rem;
         height:1.0667rem;
         position: absolute;
         top:0px;
         right:0;
     }
     #indexPage .indexTop .content{
          width:5.8667rem;
          height:1.8667rem;
          text-align: left;
     }
      #indexPage .indexTop .content p{
          margin:0;
          color:#C8C8C8;
      }
      #indexPage .indexTop .content p.schoolName{
          margin-top:0.4rem;
          color:black;
      }
      #indexPage .indexTop .arrow{
          font-size:0.6667rem;
     }
     /* 文章审核部分 */
     #indexPage .information {
        display:flex;
        justify-content: space-around;
        align-items:center;
        height:1.3333rem;
     }
    #indexPage .information span{
        display:block;
        float:left;
        padding:0.2667rem 0;
        font-size:0.3733rem;

    }
    #indexPage .contain{
        background:#eee;
    }
      /* 发布新文章  */
    #indexPage .contain .postNew{
        width:95%;
        height:2.6667rem;
        margin:0px auto;
        background:#F4C845;
        margin-top:0.5333rem;
        border-radius: 0.1333rem;
    }
     #indexPage .contain .postNew img{
        width:1.0667rem;
        height:1.0667rem;
        margin-top:0.4rem;
    }
   /* 班级信息 */
   #indexPage .classMsg{
       margin-top:0.2667rem;
        display:flex;
        justify-content: space-around;
   }
   #indexPage .classMsg img{
        width:1.0667rem;
        height:1.0667rem;
        margin-top:0.5rem;
   }
   ul,li,p,textarea{ padding:0;margin:0;list-style:none;}
    #indexPage .classMsg ul li{
        width:4.62rem;
        height:2.6667rem;
        float:left;   
        border-radius: 0.1333rem;
        margin:0.16rem 0.16rem;
        
    }
     .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 0.7467rem;
    color: #8c939d;
    width: 1.3333rem;
    height: 1.3333rem;
    line-height:1.3333rem;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-message-box{
      width:90%;
  }
</style>

